import React, { useState } from 'react'
import { LoginScreen } from './login'
import { RegisterScreen } from './register'
import { Card, Button, Divider, Typography } from 'antd'
import styled from '@emotion/styled'
import logo from 'assets/logo.svg'
import left from 'assets/left.svg'
import right from 'assets/right.svg'
import { useDocumentTitle } from 'utils'
export const UnauthenticatedApp = () => {
  const [isRegister, setIsRegister] = useState(true)
  const [error, setError] = useState<Error | null>(null)
  useDocumentTitle('登录或注册以继续')
  return (
    <Container>
      <Header />
      <Background />

      <ShadowCard>
        <Title>{isRegister ? '请登录' : '请注册'}</Title>
        {error ? <Typography.Text type={'danger'}>{error.message}</Typography.Text> : null}
        {isRegister ? <LoginScreen onError={setError} /> : <RegisterScreen onError={setError} />}
        <Divider />
        <Button
          type={'link'}
          onClick={() => {
            setIsRegister(!isRegister)
            setError(null)
          }}
        >
          {isRegister ? '没有账号? 注册账号' : '已经账号了? 直接登录'}
        </Button>
      </ShadowCard>
    </Container>
  )
}
export const LongButton = styled(Button)`
  width: 100%;
`

const Title = styled.h2`
  margin-bottom: 2.4rem;
  color: rgb(94, 108, 132);
`

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: left bottom, right bottom;
  background-image: url(${left}), url(${right});
  background-size: calc(((100vw - 40rem) / 2) - 3.2rem), calc(((100vw - 40rem) / 2) - 3.2rem), cover;
`
const Header = styled.header`
  background: url(${logo}) no-repeat center;
  padding: 5rem 0;
  background-size: 8rem;
  width: 100%;
`
const ShadowCard = styled(Card)({
  margin: '0 auto',
  width: '40rem',
  minHeight: '56rem',
  padding: '3.2rem 4rem',
  borderRadius: '0.3rem',
  boxSizing: 'border-box',
  boxShadow: 'rgba(0,0,0,0.1) 0 0 10px',
  textAlign: 'center'
})

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
`
